<script setup>
import { ref,onMounted } from 'vue'
import { querySupplierPageApi,deleteSupplierByIdApi } from '@/api/supplier'
import ModifyView from './modify.vue'
import { ElMessage } from 'element-plus'
import { queryAllCityApi } from '@/api/city'

//定义展示数据
const supplierInfo = ref([])

//定义表单数据
const supplierFrom = ref({name:''})
//定义查询点击事件
const getSupplierAll = async () => {
  const result = await querySupplierPageApi(supplierFrom.value.name,page.value,pageSize.value)
  supplierInfo.value = result.data.rows
  total.value = result.data.total
}
//定义清空点击事件
const clear = () => {
  supplierFrom.value.name = '';
  getSupplierAll()
}

//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  getSupplierAll()
}
const handleCurrentChange = (val) => {
  getSupplierAll()
}
//引用子组件
const modifyRef = ref(null)
//添加点击事件
const addSupplier = () => { 
  modifyRef.value.dialogShow = true
}
//回显数据
const edit=(id) => { 
  modifyRef.value.editSupplier(id)
}

//删除数据
const deleteById= async (id)=>{ 
  const result = await deleteSupplierByIdApi(id)
    if(result.code){
    ElMessage.success('删除成功！')
    //重新加载数据
    getSupplierAll()
  }else{
    ElMessage.error('删除失败！请重新操作')
  }
}

// 城市数据
const cityOptions = ref([])

// 获取城市数据
const getCityData = async () => {
  const result = await queryAllCityApi()
  if (result.code) {
    cityOptions.value = result.data
  }
}
// 格式化城市编码为城市名称
const formatCityName = (row, column, cellValue) => {
  const findCity = (cities, id) => {
    for (const city of cities) {
      if (city.id === id) return city
      if (city.children && city.children.length > 0) {
        const found = findCity(city.children, id)
        if (found) return found
      }
    }
    return null
  }
  const city = findCity(cityOptions.value, cellValue)
  return city ? city.name : '未知城市'
}

//数据预加载
onMounted(()=>{
  getSupplierAll()
  getCityData()
})

</script>
<template>
<div>
  <el-form :inline="true" :model="supplierFrom" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="addSupplier"><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item label="供应商">
      <el-input v-model="supplierFrom.name" placeholder="供应商名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getSupplierAll" plain>查询</el-button>
      <el-button type="default" @click="clear" plain>清空</el-button>
    </el-form-item>
  </el-form>
</div>
<div>
  <el-table :data="supplierInfo" border style="width: 100%" >
    <el-table-column type="index" label="序号" align="center" />
    <el-table-column prop="supplierName" label="供应商名称" align="center" />
    <el-table-column prop="cityCode" label="所在城市" align="center"  :formatter="formatCityName"/>
    <el-table-column prop="address" label="详细地址" align="center" />
    <el-table-column prop="linkName" label="负责人" align="center" />
    <el-table-column prop="linkPhone" label="联系方式" align="center" />
    <el-table-column prop="createBy" label="创建人" align="center" />
    <el-table-column prop="createTime" label="创建时间" align="center" />
    <el-table-column prop="updateTime" label="最后更新时间" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)" plain><el-icon><EditPen /></el-icon></el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)" plain><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
<div>
     <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</div>

<ModifyView ref="modifyRef" @search="getSupplierAll"/>
</template>
<style scoped>
</style>